<template>
  <div>
    <el-table
      :data="articleData"
      border>
      <el-table-column
        prop="title"
        label="标题"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="desc"
        label="简介"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        label="封面"
        align="center"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.cover" style="cursor: pointer; width: 150px; height: 70px" alt="" v-if="scope.row.cover" @click="imageUrl = scope.row.cover; dialogVisible = true">
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.createTime | FDateTime}}
        </template>
      </el-table-column>

      <el-table-column
        label="状态"
        align="center"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="warning" @click="close(scope.row)" v-if="scope.row.state">下线</el-button>
          <el-button type="primary" @click="open(scope.row)" v-else>重新发布</el-button>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="danger" @click="del(scope.row)">删除</el-button>
          <el-button type="primary" @click="look(scope.row._id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="page.limit"
        :total="page.count"
        @current-change="currentChange">
      </el-pagination>
    </div>

    <!-- 封面放大 -->
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="imageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>

export default {
  layout: 'admin',
  data () {
    return {
      dialogVisible: false,
      imageUrl: '',
      articleData: [],
      page: {
        pageNo: 1,
        count: 0,
        limit: 10
      }
    }
  },
  methods: {
    // 请求文章数据
    getArticleData () {
      this.$http.get('/article/admin/query', {
        params: {
          pageNo: this.page.pageNo,
          limit: this.page.limit
        }
      }).then(res => {
        // console.log(res.data)
        if (res.data) {
          this.articleData = res.data.result
          this.page.count = res.data.count
        }
      })
    },
    // 分页
    currentChange (pageNo) {
      this.page.pageNo = pageNo
      this.getArticleData()
    },
    // 下线文章
    close (row) {
      this.$confirm('下线文章 "'+ row.title +'" , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/article/update', {
          id: row._id,
          state: false
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('下线成功')
            this.getArticleData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下线'
        });          
      });
    },
    // 重新发布文章
    open (row) {
      this.$confirm('重新发布文章 "'+ row.title +'" , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/article/update', {
          id: row._id,
          state: true
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('重新发布成功')
            this.getArticleData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重新发布'
        });          
      });
    },
    // 删除
    del (row) {
      this.$confirm('删除文章 "'+ row.title +'" , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get('/article/del', {
          params: {
            id: row._id
          }
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.getArticleData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 查看
    look (id) {
      // this.$router.push({path: '/admin'})
      this.$router.push({path: '/admin/detail', query: {id: id}})
      console.log(id)
    }
  },
  created () {
    this.getArticleData()
  }
}
</script>

<style lang="scss">
  .page-container {
    text-align: center;
    margin: 50px 0;
  }
</style>
